<template>
  <a-form :form="form" >
    <a-row :gutter="md">
      <a-col :sm="24">

        <a-col :sm="20">
          <strong style="padding-left:50px;line-height:50px">国外导师</strong>
        </a-col>
      </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="姓名"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['gwdsxm',
              {
                rules: [{ required: true, message: '请填写姓名!'}],
              }
            ]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="性别"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['gwdsxbm', {rules: [{ required: true, message: '请选择性别!' }]}]">
              <a-select-option v-for="i in TYPE0011" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="研究领域"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['gwdsyjly', {rules: [{ required: true, message: '请输入研究领域!' }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="科研项目"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['gwdsyjxm', {rules: [{ required: true, message: '请输入科研项目!' }]}]"/>
          </a-form-item>
        </a-col>
      <div v-for="(item,index) in gndsData" :key="item.idKey">
        <a-col :sm="24">
          <a-col :sm="20">
            <strong style="padding-left:50px;line-height:50px">国内导师{{index+1}}</strong>
          </a-col>
          <!-- <a-col :sm="4">
            <a-button type="line" v-if="index == 0" @click="addgnds">添加国内导师</a-button>
            <a-button style="float:right;" type="line" v-if="index > 0" @click="del(index)">删除</a-button>
          </a-col> -->
        </a-col>

        <!-- <a-col :md="md" :sm="12">
          <a-form-item
            label="姓名"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" @change="gndsChange" v-decorator="[
          `gnds${item.idKey}`,
          { rules: [{ required: true, message: '请选择国内导师' }] },
        ]" >
              <a-select-option v-for="i in gndsList" :itemData="i" :key="i.dsId" :itemKey="index" :value="i.dsId">{{ i.xm }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col> -->
        <a-col :md="md" :sm="12">
          <a-form-item
            label="姓名"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-model="item.xm" disabled/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="性别"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-model="item.xb" disabled>
              <a-select-option v-for="i in TYPE0011"  :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="所在院系"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-model="item.szyx" disabled/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="项目编号"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-model="item.xmbh" disabled/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="项目名称"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <!-- <a-select :allowClear="true"  @change="xmChange" >
              <a-select-option v-for="i in item.xmmc" :itemData="i" :key="index" :value="i.id">{{ i.xmmc }}</a-select-option>
            </a-select> -->
            <a-input v-model="item.xmmc" disabled/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="项目类别"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-model="item.xmlb" disabled/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="项目类型"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-model="item.xmlx" disabled/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="项目经费"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-model="item.xmjf" disabled/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="项目起止时间"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-model="item.xmqzsj" disabled/>
          </a-form-item>
        </a-col>
        </div>
    </a-row>
<!--    <a-row>
      <a-col :md="md" :sm="12">
        <a-form-item
          label="备注"
          :labelCol="{span: 6,offset: 1}"
          :wrapperCol="{span: 16, offset: 1}"
        >
          <a-input v-decorator="['note']"/>
        </a-form-item>
      </a-col>
    </a-row>-->
  </a-form>
</template>
<script>
import { mapState } from 'vuex'
const selectArr = ['TYPE0018', 'TYPE0301', 'TYPE0312', 'TYPE0311', 'TYPE0309', 'TYPE0333', 'TYPE0030', 'TYPE0307',
  'TYPE0310', 'TYPE0015', 'TYPE0064', 'TYPE0342', 'TYPE0362', 'TYPE0059', 'TYPE0347', 'TYPE0073', 'TYPE0075',
  'TYPE0126', 'TYPE0441', 'TYPE0120','TYPE0011']
export default {
  props: {
    xjxx: {
      type: Object,
      default: () => {}
    },
    xjxxId:{
      type: String,
      default: () => {}
    }
  },
  // props: ['xjxx'],
  data () {
    return {
      md: (12),
      selectMenu: {},
      graduateYearList: [],
      gndsList:[],
      gndsData:[
        {
          xm: '',
          xb: '',
          szyx: '',
          xmmc: '',
          xmbh: '',
          xmlb: '',
          xmlx: '',
          xmjf: '',
          xmqzsj: '',
          idKey: 0
        }
        ],
      gndsIndex:0
    }
  },
  computed: {
    ...mapState({
      TYPE0126: state => state.app['TYPE0126'], // 年级
      TYPE0075: state => state.app['TYPE0075'], // 学生类别
      TYPE0073: state => state.app['TYPE0073'], // 学生当前状态
      TYPE0347: state => state.app['TYPE0347'], // 培养模式
      TYPE0059: state => state.app['TYPE0059'], // 培养方式
      TYPE0362: state => state.app['TYPE0362'], // 录取类别
      TYPE0342: state => state.app['TYPE0342'], // 导师职称
      TYPE0064: state => state.app['TYPE0064'], // 入学方式
      TYPE0015: state => state.app['TYPE0015'], // 来源国
      TYPE0310: state => state.app['TYPE0310'], // 培养层次
      TYPE0307: state => state.app['TYPE0307'], // 学习形式
      TYPE0333: state => state.app['TYPE0333'], // 办学形式
      TYPE0030: state => state.app['TYPE0030'], // 办学类型
      TYPE0311: state => state.app['TYPE0311'], // 学业奖学金等级
      TYPE0312: state => state.app['TYPE0312'], // 助研奖学金等级
      TYPE0018: state => state.app['TYPE0018'], // 学历
      TYPE0301: state => state.app['TYPE0301'], // 学制
      TYPE0309: state => state.app['TYPE0309'], // 招生季节
      TYPE0441: state => state.app['TYPE0441'],
      TYPE0120: state => state.app['TYPE0120'],
      TYPE0011: state => state.app['TYPE0011'],
    })
  },
  beforeCreate () {

  },
  created () {
    this.form = this.$form.createForm(this)
    const curYear = new Date().getFullYear()
    function generateYearArray (start, end) {
      let arr = []
      let len = end - start
      for (let index = 0; index < len; index++) {
        arr.push(...[`${start + index}-07-01`,`${start + index}-12-31`])
      }
      return arr
    }
    this.graduateYearList = generateYearArray(curYear-100,curYear+20)
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
    this.initSelectMenu()
    console.log(this.xjxx)
    this.$nextTick(() => {
      this.form.setFieldsValue(this.xjxx)
    })
  },
  methods: {
    initFormXjxx(){
      this.$nextTick(() => {
        // let keys = Object.keys(this.form.getFieldsValue())
        // let obj = {}
        // keys.forEach(key => {
        //   obj[key] = this.xjxx[key]
        // })
        // this.form.setFieldsValue(obj)
        this.gndsData=this.xjxx.jzgXmDetail.map((item,index)=>{
            return {
              xm: item.xm ? item.xm : '',
              xb: item.xbm ? item.xbm : '',
              szyx: item.ssyxmc ? item.ssyxmc : '',
              xmmc: item.xmList.length ? item.xmList[0].xmmc : '',
              xmbh: item.xmList.length ? item.xmList[0].xmbh : '',
              xmlb: item.xmList.length ? item.xmList[0].xmlbmc : '',
              xmlx: item.xmList.length ? item.xmList[0].xmlxmc : '',
              xmjf: item.xmList.length ? item.xmList[0].xmjf : '',
              xmqzsj: item.xmList.length ? item.xmList[0].kssj : '',
            }
        })
        // this.xjxx.jzgXmDetail.map((item,index)=>{
          // let obj1 = {}
          // obj1[`gnds${index}`] = item.dsId
          // this.form.setFieldsValue(obj1)
          // this.gndsList.map((it,ind)=>{
          //   if(item.dsId == it.dsId){
          //     console.log(item.dsId)
          //     let json = {
          //       xm:item.dsId ? item.dsId : '',
          //       xb:item.xbm ? item.xbm : '',
        //       szyx:item.ssyxmc ? item.ssyxmc : '',
        //       xmmc:it.xmList.length ? it.xmList[0].xmmc : '',
        //       xmlb:it.xmList.length ? it.xmList[0].xmlbmc : '',
        //       xmlx:it.xmList.length ? it.xmList[0].xmlxmc : '',
        //       xmjf:it.xmList.length ? it.xmList[0].xmjf : '',
        //       xmqzsj:it.xmList.length ? it.xmList[0].kssj : '',
        //       idKey:index
        //     }
        //     this.$set(this.gndsData,index,json)
        //   }
        // })

        // })
        // console.log(this.gndsData)
      })
    },
    addgnds(){
      ++this.gndsIndex
      this.gndsData.push({
        xm: '',
        xb: '',
        szyx: '',
        xmmc: '',
        xmbh: '',
        xmlb: '',
        xmlx: '',
        xmjf: '',
        xmqzsj: '',
        idKey: this.gndsIndex
      })
    },
    del(index){
        this.gndsData.splice(index, 1)
    },
    initSelectMenu () {
      let allRequest = [
        this.$api.base.areaList(),
        this.$api.base.collegeAll(),
        // this.$api.base.subjectAll({xklb: '01'}),
      ]
      console.log(this.xjxx)
      let parmes = this.xjxxId ? this.xjxxId:''
      this.$api.overseas.getGndsList({xsxxId: parmes}).then(res => {
          this.gndsList = res.data
          if(this.xjxx){
            this.initFormXjxx()
          }
        })
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          province: res[0].data,
          yx: res[1].data,
          // xk: res[2].data,
        }

      })
    },
    setData (option, key) {
      this.form.setFieldsValue({[key]: option.data.attrs.name})
    },
    provinceChange (v) {
      this.form.setFieldsValue({xzqhcdm: '', xzqhxdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'city', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'city', [])
      }
      this.$set(this.selectMenu, 'area', [])
    },
    pyccmChange(v){
      if(v){
        // 获取研究方向
        let ssyxm = this.form.getFieldValue('ssyxm')
        if(!ssyxm && this.xjxx){
          ssyxm = this.xjxx.ssyxm
        }
        let sszym  = this.form.getFieldValue('sszym')
        if(!sszym && this.xjxx){
          sszym = this.xjxx.sszym
        }
        let xslbm  = this.form.getFieldValue('xslbm')
        if(!xslbm && this.xjxx){
          xslbm = this.xjxx.xslbm
        }
        let sznj  = this.form.getFieldValue('sznj')
        if(!sznj && this.xjxx){
          sznj = this.xjxx.sznj
        }
        let xwccm  = this.getXwccm();
        this.fetchYjfx(ssyxm, sszym, sznj, xslbm,xwccm)
      }else{
        this.$set(this.selectMenu, 'yjfx', [])
      }
    },
    getXwccm(){
      let pyccm = this.form.getFieldValue('pyccm')
      if(pyccm === '432'){
        return 3;
      }
      if(pyccm === '431'){
        return 2;
      }
      return null;
    },
    cityChange (v) {
      this.form.setFieldsValue({xzqhxdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'area', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'area', [])
      }
    },
    gndsChange(v,n){
      console.log(this.gndsData)
      console.log(n)
      this.gndsData[n.data.attrs.itemKey].xb = n.data.attrs.itemData.xbm
      this.gndsData[n.data.attrs.itemKey].szyx = n.data.attrs.itemData.ssyxmc
      this.gndsData[n.data.attrs.itemKey].id = n.data.attrs.itemData.dsId
      this.gndsData[n.data.attrs.itemKey].xmmc = n.data.attrs.itemData.xmList
      this.gndsData[n.data.attrs.itemKey].xmbh = n.data.attrs.itemData.xmList

      if(n.data.attrs.itemData.xmList.length){
        this.gndsData[n.data.attrs.itemKey].xmlb = n.data.attrs.itemData.xmList[0].xmlbmc
        this.gndsData[n.data.attrs.itemKey].xmlx = n.data.attrs.itemData.xmList[0].xmlxmc
        this.gndsData[n.data.attrs.itemKey].xmjf = n.data.attrs.itemData.xmList[0].xmjf
        this.gndsData[n.data.attrs.itemKey].xmqzsj = `${n.data.attrs.itemData.xmList[0].kssj} - ${n.data.attrs.itemData.xmList[0].jssj}`
      }else{
        this.gndsData[n.data.attrs.itemKey].xmlb = ''
        this.gndsData[n.data.attrs.itemKey].xmlx = ''
        this.gndsData[n.data.attrs.itemKey].xmjf = ''
        this.gndsData[n.data.attrs.itemKey].xmqzsj = ''
      }

    },
    xmChange(v,n){
      this.gndsData[n.data.key].xmlb = n.data.attrs.itemData.xmlbmc
      this.gndsData[n.data.key].xmlx = n.data.attrs.itemData.xmlxmc
      this.gndsData[n.data.key].xmjf = n.data.attrs.itemData.xmjf
      this.gndsData[n.data.key].xmId = n.data.attrs.itemData.id
      this.gndsData[n.data.key].xmqzsj = `${n.data.attrs.itemData.kssj} - ${n.data.attrs.itemData.jssj}`
      console.log(this.gndsData)
    },
    yxChange (code) {
      this.form.setFieldsValue({sszym: ''})
      if (code) {
        this.$api.base.majorAll({lsdwh: code}).then(res => {
          this.$set(this.selectMenu, 'zy', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'zy', [])
      }
    },
    zyChange (code){
      this.form.setFieldsValue({yjfx: ''})
      this.form.setFieldsValue({dszgh: ''})
      this.form.setFieldsValue({dedszgh: ''})
      if(code){
        // 获取研究方向
        // try {
          console.log(this.xjxx)
          let ssyxm = this.form.getFieldValue('ssyxm')
          if(!ssyxm && this.xjxx){
            ssyxm = this.xjxx.ssyxm
          }
          let sznj  = this.form.getFieldValue('sznj')
          if(!sznj && this.xjxx){
            sznj = this.xjxx.sznj
          }
          let xslbm  = this.form.getFieldValue('xslbm')
          if(!xslbm && this.xjxx){
            xslbm = this.xjxx.xslbm
          }
          let xwccm  = this.getXwccm()
          this.fetchYjfx(ssyxm, code, sznj, xslbm,xwccm)
          this.fetchDyds(ssyxm, code)
        // } catch (error) {
        //   console.log(error)
        // }
      }else{
        this.$set(this.selectMenu, 'yjfx', [])
        this.$set(this.selectMenu, 'dsList', [])
      }
    },
    sznjChange (code){
      this.form.setFieldsValue({yjfx: ''})
      if(code){
        // 获取研究方向
        let ssyxm = this.form.getFieldValue('ssyxm')
        if(!ssyxm && this.xjxx){
          ssyxm = this.xjxx.ssyxm
        }
        let sszym  = this.form.getFieldValue('sszym')
        if(!sszym && this.xjxx){
          sszym = this.xjxx.sszym
        }
        let xslbm  = this.form.getFieldValue('xslbm')
          if(!xslbm && this.xjxx){
            xslbm = this.xjxx.xslbm
        }
        let xwccm  = this.getXwccm()
        this.fetchYjfx(ssyxm, sszym, code, xslbm,xwccm)
      }else{
        this.$set(this.selectMenu, 'yjfx', [])
      }
    },
    xslbChange (code) {
      this.form.setFieldsValue({yjfx: ''})
      if(code){
        // 获取研究方向
        let ssyxm = this.form.getFieldValue('ssyxm')
        if(!ssyxm && this.xjxx){
          ssyxm = this.xjxx.ssyxm
        }
        let sszym  = this.form.getFieldValue('sszym')
        if(!sszym && this.xjxx){
          sszym = this.xjxx.sszym
        }
        let sznj  = this.form.getFieldValue('sznj')
        if(!sznj && this.xjxx){
          sznj = this.xjxx.sznj
        }
        let xwccm  = this.getXwccm();
        this.fetchYjfx(ssyxm, sszym, sznj, code,xwccm)
      } else  {
        this.$set(this.selectMenu, 'yjfx', [])
      }
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    fetchYjfx (ssyxm, sszym, zsxn, xslbm,xwccm){
      console.log(ssyxm, sszym, zsxn, xslbm)
      if(ssyxm && sszym && zsxn && xslbm){
        this.$api.base.researchListByDistinct({ssyxm, sszym, zsxn, xslbm,xwccm}).then(res => {
          this.$set(this.selectMenu, 'yjfx', res.data)
        })
      }
    },
    fetchDyds (yxm, zym) {
      if(yxm && zym){
        this.$api.teacher.queryListByStu({yxm: yxm, zym: zym}).then(res => {
          this.$set(this.selectMenu, 'dsList', res.data)
        })
      }
    },

    // ,
    // fetchDeds (e) {
    //   if(value && value.length > 1) {
    //     this.deds.fetching = true
    //     this.$api.teacher.queryListByStu({dwh: '', cx: e}).then(res => {
    //       this.deds.list = res.data
    //       this.deds.fetching = false
    //     })
    //   }
    // }
  }
}
</script>
